<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="../common/meta.jsp" %>
<link rel="stylesheet" href="${contextPath}/plugins/bootstrap-table/bootstrap-table.min.css">
<script src="${contextPath}/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${contextPath}/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

      <div class="row">
        <div class="col-xs-12">
        	<div class="box">
        		<div class="box-header">
	              <div style="position: static" class="box-tools">
                        <div class="input-group input-group-sm">
                            <button class="btn btn-default addDemo" type="button"><a href="javascript:void(0)">新增</a></button>
                            <button class="btn btn-default formValid" type="button"><a href="javascript:void(0)">表单验证</a></button>
                            <button class="btn btn-primary" type="button"><a style="color: #fff" href="javascript:void(0)">编辑</a></button>
                            <button class="btn btn-danger" type="button"><a style="color: #fff" href="javascript:void(0)">删除</a></button>
							<button class="btn btn-default alertDemo" type="button"><a href="javascript:void(0)">弹层</a></button>
							<button class="btn btn-default showDemo" type="button"><a href="javascript:void(0)">弹窗</a></button>
                        </div>
                  </div>
	            </div>
        		<div class="box-body table-responsive no-padding">
	              <table id="dataTable">
	              </table>
	            </div>  
            </div>
        </div>
      </div>
<script type="text/javascript">
	TableInit.init({
		"datatable":$("#dataTable"),
		"url":"/demo/demoList.do",
		"columns":[{
				        field: 'name',
				        title: '姓名'
				    }, {
				        field: 'password',
				        title: '年龄'
				    }, {
				        title: '状态',
				        formatter: function (value, row, index) {
				            return '<span class="label btn-info">审核中</span><span class="label label-success">审核通过</span>';
				        }
				    }, {
				        title: '操作',
				        formatter: function (value, row, index) {
				            var id = row.id;
				            return '<button class="btn btn-primary btn-xs mr10" type="button">编辑</button>'+
                            '<button class="btn btn-danger btn-xs" type="button">删除</button>';
				        }
				    }
		]
	});
	$(".addDemo").click(function(){
		skip("/pages/table/add.jsp","新增","222");
	});
	
	$(".formValid").click(function(){
		skip("/pages/table/form.jsp");
	});
	
	$(".alertDemo").click(function(){
		BootstrapDialog.confirm("123",function(result){
			if(result){
				BootstrapDialog.alert("456");
			}else{
				BootstrapDialog.alert("789");
			}
		});
	});
	
	$(".showDemo").click(function(){
		var winInfo = '<div class="box-body table-responsive no-padding">\
            <table id="dataTable01">\
        </table>\
      </div>';
		BootstrapDialog.show({
			title:"1111",
			message:$(winInfo),
			onshown:function(){
				TableInit.init({
					"datatable":$("#dataTable01"),
					"endpoint":"/Demo/pageQueryDemo",
					"formData":JSON.stringify({}),
					"pageSize":5,
					"height":300,
					"columns":[{
									checkbox:true
								},{
							        field: 'name',
							        title: '姓名'
							    }, {
							        field: 'password',
							        title: '年龄'
							    }, {
							        title: '状态',
							        formatter: function (value, row, index) {
							            return '<span class="label btn-info">审核中</span><span class="label label-success">审核通过</span>';
							        }
							    }
					]
				});
			},buttons:[{
				label:"已选择ID",
				action:function(){
					var ids='';
					$.each($('#dataTable01').bootstrapTable('getSelections'),function(){
						ids += this.id + ",";
					});
					BootstrapDialog.alert(ids);
				}
			},{
				label:"关闭",
				cssClass: 'btn-primary',
				action:function(dialogItself){
					dialogItself.close();
				}
			}]
		});
		
	});
	
</script>
